<template>
  <div class="nav-box">
    <div style="margin-left:20px;" class="vertical-middle">
      <img :src="logoImg" alt style="width:135px;" />
    </div>
    <div class="nav-left" style="flex:1;margin-left:20px;">
      <div
        v-for="(item,index) in navList"
        :class="index == currentIndex?'nav-item nav-item-selected':'nav-item nav-item-unselected'"
        @click="handleChange(index)"
      >
        <div class="nav-item-btn">
          <div style="display: flex;">
            <span :class="'nav-item-icon iconfont '+item.icon"></span>
          </div>
          <div style="display: flex;">
            <span class="nav-item-lable">{{item.label}}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="nav-right" style="flex:1;">
      <div style="height:40px;" class="windows-action-group vertical-middle">
        <div v-if="user!=null" class="windows-action-group vertical-middle">
          <el-avatar
            :size="28"
            :src="user.avatar==''?require('../assets/boy.png'):$http.defaults.baseURL+user.avatar"
          ></el-avatar>
          <el-popover placement="bottom" width="274" trigger="click" popper-class="popper">
            <el-row type="flex" align="middle" style="padding:12px;">
              <el-col :span="12" class="vertical-middle">
                <el-avatar
                  :size="40"
                  :src="user.avatar==''?require('../assets/boy.png'):$http.defaults.baseURL+user.avatar"
                ></el-avatar>
                <span style="margin-left:8px;font-size:16px;">{{user.username}}</span>
              </el-col>
              <el-col :span="12" class="vertical-middle horizontal-right">
                <el-button style="-webkit-app-region: no-drag;" size="small" round>每日签到</el-button>
              </el-col>
            </el-row>
            <el-row type="flex" align="middle" style="padding:12px;border-top: 1px solid #f0eeee;">
              <el-col :span="12" class="vertical-middle">
                <span>我的积分余额：</span>
              </el-col>
              <el-col :span="12" class="vertical-middle horizontal-right">
                <span style="color:#ff5a00;font-size:20px;margin-right:2px;">{{user.integral}}</span>
                <span>分</span>
              </el-col>
            </el-row>
            <div class="popper-item-box">
              <div class="popper-item" @click="handleLogout">
                <div class="vertical-middle">
                  <span class="el-icon-error" style="font-size:18px;margin-right:5px;"></span>
                  <span>退出登录</span>
                </div>
              </div>
            </div>
            <div slot="reference" style="margin-left:5px;margin-right:20px;">
              <span class="nick">
                {{user.username}}
                <i class="el-icon-caret-bottom el-icon--right"></i>
              </span>
            </div>
          </el-popover>
        </div>

        <div v-else class="windows-action-group vertical-middle">
          <el-avatar :size="28" :src="require('../assets/user.png')"></el-avatar>
          <span
            class="nick"
            style="margin-left: 5px; margin-right: 20px;"
            @click.sync="loginFormVisible = true"
          >
            未登录
            <i class="el-icon-caret-bottom el-icon--right"></i>
          </span>
        </div>
        <span class="windows-action nav-item-icon iconfont icon-minimize" @click="winMinimize()"></span>
        <span class="windows-action nav-item-icon iconfont icon-close" @click="winClose()"></span>
      </div>

      <div style="height:40px"></div>
    </div>

    <login :visible.sync="loginFormVisible" @close="loginFormVisible=false" />
  </div>
</template>

<script>
import { log } from "util";
import set from "../modules/set";
import { mapGetters } from "vuex";
import login from "./Login";
export default {
  name: "igfnav",
  components: {
    login
  },
  props: {
    value: {
      type: String
    },
    navList: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      loginFormVisible: false,
      currentIndex: 0,
      navItemMouseOverIndex: -1,
      loginData: {
        username: "",
        password: ""
      },
      registData: {
        username: "",
        password: "",
        share_code: ""
      }
    };
  },
  methods: {
    handleLogout() {
      this.$store.dispatch("user_logout");
    },
    // 点击tab标题触发
    handleChange(index) {
      this.currentIndex = index;
      this.$router.push(this.navList[index].path);
    },
    winMinimize() {
      this.$electron.ipcRenderer.send("minimize");
    },
    winClose() {
      let config = set.getConfig();
      if (config.closeApp == "0") {
        this.$electron.ipcRenderer.send("hide");
      } else if (config.closeApp == "1") {
        this.$electron.ipcRenderer.send("close");
      }
    }
  },
  watch: {},
  computed: {
    ...mapGetters(["logoTitle", "logoName", "logoImg", "themeColor", "user"])
  },
  created() {
    this.$http
      .post("/integral/gettasks", {})
      .then(res => {
        this.taskList = res.data.list;
        this.$http
          .post("/integral/handletask", {
            task_id: task.task_id,
            data: data
          })
          .then(res => {
            this.$message({
              message: res.msg,
              type: "success"
            });
            this.emailDialogVisible = false;
            this.alipayDialogVisible = false;
            this.avatarDialogVisible = false;
            this.shareDialogVisible = false;
            task.status_value = true;
            this.$store.dispatch("user_check");
          })
          .catch(err => {
            this.$message.error(err.msg);
          });
      })
      .catch(err => {
        this.$message.error(err.msg);
      });
  }
};
</script>

<style scoped>
.nav-box {
  height: 80px;
  background-color: #48484c;
  display: flex;
  flex-direction: row;
  font-size: 14px;
  -webkit-user-select: none;
  -webkit-app-region: drag;
  -moz-user-select: none;
}
.nav-left {
  display: flex;
  flex-direction: row;
  justify-content: start;
}
.nav-center {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.nav-right {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
.nav-item {
  padding: 0 10px;
  -webkit-app-region: no-drag;
  cursor: pointer;
  transition: all 0.3s;
}

.nav-item-unselected:hover {
  color: #fff;
  transform: scale(1.1);
}
.nav-item-unselected:active {
  color: #a4a3a4;
}

.nav-item-selected {
  color: #32cd32;
}

.nav-item-active {
  color: #fff;
}
.nav-item-btn {
  margin: 7px 10px 10px 10px;
}

.nav-item-icon {
  display: block;
  font-size: 30px;
  margin: 5px auto;
  -webkit-transition: font-size 0.25s linear, width 0.25s linear;
  -moz-transition: font-size 0.25s linear, width 0.25s linear;
  transition: font-size 0.25s linear, width 0.25s linear;
  align-self: center;
}
.nav-item-lable {
  align-self: center;
}
.windows-action {
  cursor: pointer;
  -webkit-app-region: no-drag;
}
.windows-action-group {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-right: 5px;
}
.windows-action:hover {
  color: #fff;
}
.icon-close:active {
  color: #ff6a6a;
}
.icon-minimize:active {
  color: #cfcfcf;
}
.nick {
  cursor: pointer;
  -webkit-app-region: no-drag;
}
.nick:hover {
  color: #fff;
}
.popper {
  padding: 0 !important;
}
.popper-item {
  border-top: 1px solid #f0eeee;
  font-size: 15px;
  padding: 0 12px;
  cursor: pointer;
}
.popper-item-box {
  width: 100%;
  height: 40px;
  line-height: 40px;
}
.popper-item-box :hover {
  background-color: #e9e7e7;
}
</style>
    

